<template>
  <div class="pro_info">
    <div style="margin: 8px">
      <el-select
        v-model="value"
        clearable
        class="m-2"
        placeholder="                 操作记录"
        placeholder-class="center"
        @change="filterStatus"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-select
        v-model="id"
        class="m-2"
        clearable
        placeholder="                  操作人"
        placeholder-class="center"
        @change="filterStatus"
      >
        <el-option
          v-for="item in options2"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        />
      </el-select>
      <el-date-picker
        style="height: 30px; padding-bottom: 3px; margin-top: px"
        v-model="value2"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        @change="filterStatus"
      />
    </div>
    <el-table :data="list" style="width=100%" border>
      <el-table-column
        align="center"
        prop="name"
        label="厂区"
        width="item.width"
      />
      <el-table-column
        align="center"
        prop="code"
        label="编号"
        width="item.width"
      />
      <el-table-column
        align="center"
        prop="status"
        label="操作记录"
        sortable
        width="200"
        column-key="date"
      />
      <el-table-column
        align="center"
        prop="operator"
        label="操作人"
        sortable
        width="200"
        column-key="date"
      />

      <el-table-column
        align="center"
        prop="time"
        label="操作时间"
        sortable
        width="200"
        column-key="time"
      />

      <el-table-column
        align="center"
        prop="reason"
        label="操作原因"
        width="270"
      />
    </el-table>
  </div>
</template>

<script   lang="ts" setup name="company">
import { useRoute, useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { ElSelect } from "element-plus";
import { AnyColumn } from "element-plus/es/components/table-v2/src/common";
import { Cq } from "../types";
import { AnyColumns } from "element-plus/es/components/table-v2/src/types";
//操作记录
const value = ref("");
const values = ref([]); // 结果列表
//操作人
const id = ref("");
//路由跳转
const route = useRoute();
//操作时间
const value2 = ref<any>([]);
const tableData = ref<Cq[]>([]);
const list = ref<Cq[]>([]);
tableData.value = [
  {
    id: "1",
    name: "电厂" + route.query.cq,
    code: route.query.id,
    status: route.query.state == "1" ? "开门" : "关门",
    operator: "张三",
    time: "2024-01-21 13:19:40",
    reason: "设备故障",
  },
  {
    id: "2",
    name: "电厂" + route.query.cq,
    code: route.query.id,
    status: "开门",
    operator: "李四",
    time: "2024-01-21 23:19:54",
    reason: "设备故障",
  },
  {
    id: "3",
    name: "电厂" + route.query.cq,
    code: route.query.id,
    status: "开门",
    operator: "张三",
    time: "2024-01-20 13:25:30",
    reason: "设备故障",
  },
];

list.value = tableData.value;

//获取下拉框的输入值

// const filterStatus = (val: any) => {
//   console.info("val: "+val);
//   //查询方法

//   list.value = tableData.value;
//   if (value.value || id.value) {
//     list.value = tableData.value.filter((item) => {
//       return (
//         item.status.indexOf(value.value) > -1 &&
//         item.operator.indexOf(id.value) > -1
//       );
//     });
//   } else {
//     console.log("操作记录~~~");
//   }
// };

// const filterTime = (val: any) => {
//   console.info(val);
//   const startTime = new Date(val[0]);
//   const endTime = new Date(val[1]);
//   console.info("开始" + startTime);
//   console.info("结束" + endTime);

// if (value2.value) {
//     console.info("进if了");
//     list.value = tableData.value.filter((item) => {
//       const itemTime = new Date(item.time); // 确保item.time是日期对象
//       console.info("itemTime   "+itemTime)
//       return itemTime >= startTime && itemTime <= endTime;
//     });
//   } else {
//     console.log("时间判断else");
//     return false;
//   }
// };

const filterStatus = (val: any) => {
  console.info("11111", value2.value);
  if (!value2.value) {
    value2.value = [];
  }
  const startTime = new Date(value2.value[0]);
  const endTime = new Date(value2.value[1]);

  console.info("开始" + startTime);
  console.info("结束" + endTime);
  //自定义查询方法
  list.value = tableData.value;
  if (value.value || id.value || value2.value) {
    list.value = tableData.value.filter((item) => {
      return (
        item.status.indexOf(value.value) > -1 &&
        item.operator.indexOf(id.value) > -1 &&
        (value2.value.length == 0 ||
          (new Date(item.time) >= startTime && new Date(item.time) <= endTime))
      );
    });
  } else {
    // 刷新下拉列表
    console.log("没有满足的条件");
    // 在这里添加代码来刷新下拉列表
  }
};
const options = [
  {
    value: "开门",
    label: "开门",
  },
  {
    value: "关门",
    label: "关门",
  },
];

const options2 = [
  {
    id: "张三",
    label: "张三",
  },
  {
    id: "李四",
    label: "李四",
  },
];
</script>


<style lang="css" scoped>
.pro_info {
  text-align: center;
}
::v-deep.el-table .warning-row {
  width: 100%;
  text-align: center;
  --el-table-tr-bg-color: var(--el-color-error-light-3);
  pointer-events: none;
}
.center {
  text-align: center;
}
</style>